<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件slot</title>
		<script src="Vue.js"></script>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			html,body{
				height:100%;
				width:100%;
			}
			#box{
				width:600px;
				height:300px;
				margin:50px auto;
				padding:20px;
				border:2px solid black;
				box-shadow:10px 20px 20px 10px gray;
			}
			h2{
				height:50px;
				width:100%;
				line-height:50px;
				text-align:center;
				background-color:black;
				color:white;
			}
			hr{
				margin:20px 0;
			}
			button{
				width:80px;
				height:30px;
				text-align:center;
				line-height:30px;
				border:none;
				cursor:pointer;
				background-color:black;
				color:white;
				margin:0 50px;
			}
			button:hover{
				background-color:red;
			}
			p{
				text-align:center;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<h2>slot--插槽分发内容</h2>
			<hr>
			<hello>
				<button @click="change" slot="leftButton">leftButton</button>
				<span>标题内容--slot--插槽分发内容</span>
				<button @click="change" slot="rightButton">rightButton</button>
			</hello>
			<hr>
			<p></p>
		</div>
		
		<script>
			/* 
			组件插槽的作用:父组件向子组件传递内容(模板内容)
			 使用solt(插槽)分发内容：
			 -->单个slot
			 -->具名slot
			 -->作用域插槽===应用场景:父组件对子组件的内容进行加工处理
			 -->混合父组件的内容和子组件自己的模板--内容分发
			 -->父组件模板的内容在父组件作用域内编译：子组件模板的内容在子组件作用域内使用
			 */
			var vm = new Vue({
				el:"#box",
				data:{
					name:"wuhao"
				},
				components:{//局部组件 `....`模板字符串
					"hello":{
						template:`
						<div>
							<slot name="leftButton"></slot>
							<slot></slot>
							<slot name="rightButton"></slot>
						</div>`
					}
				},
				methods:{
					change:function(){
						document.querySelector("p").innerHTML = "Solt相关--插槽分发内容;--单个slot;--具名slot";
					}
				}
			})
		</script>
	</body>
</html>
